<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="我的留言">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="mingxi d-flex align-items">
			<view class="jf-w" :current="current" @click="chage_tabs(jianfang)"
				v-for="(jianfang,index) in jianfang_lists" :key="index">
				<view :class="current == index ? 'jf-w-t-xz' : 'jf-w-t'">{{jianfang.tabs_name}}</view>
				<view :class="current == index ? 'line' : ''"></view>
			</view>
		</view>
		<view class="" v-if="current == 0">
			<view class="" v-if="!liuyan_list.length">
				<u-empty>
				</u-empty>
			</view>
			<view class="huifu" v-else v-for="(liuyan,index) in liuyan_list" :key="index">
				<view class="huifu-w d-flex justify-content-space-between">
					<view class="d-flex">
						<image class="hf-avart" :src="liuyan.user.avatar" mode=""></image>
						<view class="">
							<view class="d-flex align-items">
								<view class="hf-name">{{liuyan.user.nickname}}</view>
								<view class="time-long">{{liuyan.shijian}}</view>
							</view>
							<view class="liuyan">{{liuyan.content}}</view>
							<view class="del_foot d-flex align-items justify-content-space-between">
								<view class=""></view>
								<view class="hf-btn-del">
									<u-button color="#FF6400" @click="del(liuyan)" size="mini" text="删除"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="current == 1">
			<view class="" v-if="!huifu_list.length">
				<u-empty>
				</u-empty>
			</view>
			<view class="huifu" v-else v-for="(huifu,index) in huifu_list" :key="index">
				<view class="huifu-w d-flex justify-content-space-between">
					<view class="d-flex">
						<image class="hf-avart" :src="huifu.user.avatar" mode="widthFix"></image>
						<view class="">
							<view class="d-flex align-items">
								<view class="hf-name">{{huifu.user.nickname}}</view>
								<view class="time-long">{{huifu.shijian}}</view>
							</view>
							<view class="liuyan">{{huifu.content}}</view>
							<view class="hf-btn" @click="huifu_txt(huifu)">回复</view>
						</view>
					</view>
				</view>
				<view class="d-flex">
					<view class="zuozhe" v-for="(zuozhe,index) in huifu.next_comment" :key="index">
						<view class="d-flex align-items">
							<view class="zuozhe-tit">{{zuozhe.user.nickname}}</view>
							<view class="zuozhe-btn">作者</view>
						</view>
						<view class="content-zz">{{zuozhe.content}}</view>
						<view class="time">{{zuozhe.shijian}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getMyCommentList,
		deleteComment,
		getTouserCommentList
	} from '@/api/user.js'
	export default {
		data() {
			return {
				current: 0,
				jianfang_lists: [{
					id: 0,
					tabs_name: '留言',
				}, {
					id: 1,
					tabs_name: '回复',
				}],
				liuyan_list: [],
				huifu_list:[],
				page: 1,
				limit: 7,
			}
		},
		onLoad() {
			this.get_liuyan()
			this.get_huifu_list()
		},
		// 用户下拉加载
		onPullDownRefresh() {
			this.page = 1
			this.get_liuyan()
			this.get_huifu_list()
		},
		// 上拉触底加载
		onReachBottom() {
			this.page++
			this.get_liuyan()
			this.get_huifu_list()
		},
		methods: {
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			chage_tabs(e) {
				console.log("选择收支明细", e);
				this.current = e.id
			},
			// 回复评论
			huifu_txt(e){
				uni.navigateTo({
					url: '/pagesA/pinglun/pinglun?comment_id=' + e.id + '&id=' + e.content_id
				})
			},
			// 删除留言
			del(liuyan) {
				let that = this
				uni.showModal({
					title: '删除',
					content: '确定要删除此条留言吗？',
					success(s) {
						if (s.confirm) {
							console.log("用户按了确定");
							var data = {
								commant_id: liuyan.id,
							}
							deleteComment(data).then(res => {
								console.log("删除评论");
								if (res.code == 1) {
									uni.showToast({
										title: '删除成功',
										icon: 'none'
									})
									that.get_liuyan()
								}
							})
						}
						if (s.cancel) {
							console.log("用户按了取消");
						}
					},
					fail(e) {
						console.log("删除失败", e);
					}
				})

			},
			// 获取的我的留言
			get_liuyan() {
				var data = {
					page: this.page,
					limit: this.limit,
				}
				getMyCommentList(data).then(res => {
					console.log("获取我的留言", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.liuyan_list = res.data.list
						} else {
							this.liuyan_list = this.liuyan_list.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			// 获取回复
			get_huifu_list(){
				var data = {
					page: this.page,
					limit: this.limit,
				}
				getTouserCommentList(data).then(res => {
					console.log("回复列表",res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.huifu_list = res.data.list
						} else {
							this.huifu_list = this.huifu_list.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
		}
	}
</script>

<style>
	.del_foot {
		width: 540rpx;
	}

	.hf-btn-del {}

	.hf-btn {
		width: 65rpx;
		height: 35rpx;
		font-size: 18rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		text-align: center;
		border-radius: 16rpx;
		background: #C7C7C7;
	}

	.time {
		font-size: 24rpx;
		font-weight: normal;
		color: #999999;
	}

	.content-zz {
		font-size: 24rpx;
		color: #666666;
		margin: 20rpx 0;
	}

	.zuozhe-tit {
		font-size: 24rpx;
		font-weight: normal;
		color: #333333;
	}

	.zuozhe-btn {
		width: 65rpx;
		height: 35rpx;
		font-size: 18rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		text-align: center;
		border-radius: 16rpx;
		background: #FF6400;
		margin-left: 10rpx;
	}

	.zuozhe {
		width: 516rpx;
		height: 170rpx;
		border-radius: 6rpx;
		opacity: 1;
		background: #F6F6F6;
		margin-top: 20rpx;
		margin-left: 110rpx;
		padding: 30rpx 0 0 30rpx;
	}

	.liuyan {
		font-size: 24rpx;
		line-height: 55rpx;
		color: #333333;
	}

	.time-long {
		font-size: 24rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	.hf-name {
		font-size: 24rpx;
		font-weight: normal;
		color: #333333;
	}

	.hf-avart {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		display: block;
		margin-right: 20rpx;
	}

	.huifu-w {
		width: 630rpx;
		margin: auto;
	}

	.huifu {
		width: 690rpx;
		margin: 30rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx 0;
	}

	.line {
		width: 48rpx;
		height: 4rpx;
		margin: auto;
		margin-top: 0rpx;
		background: #FF6400;
	}

	.jf-w-t-xz {
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		color: #FF6400;
	}

	.jf-w-t {
		font-size: 32rpx;
		font-weight: normal;
		text-align: center;
		color: #1D2129;
	}

	.jf-w {
		width: 50%;
		text-align: center;
		line-height: 80rpx;
	}

	.mingxi {
		width: 750rpx;
		height: 84rpx;
		background-color: #fff;
		border-radius: 8rpx;
		margin: 2rpx auto;
	}

	page {
		background-color: #F7F8FB;
		padding-bottom: 50rpx;
	}
</style>